<template>
  <view class="details">
    <view class="pures-header" :style="{'height': statusBarHeight + navbarHeight + 'px'}">
      <view class="pures-header-top">
        <!-- 状态栏高度 -->
        <view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
        <!--顶部标题栏-->
        <view class="pures-header-box">
          <u-icon name="arrow-left" color="#ffffff" size="40" @click="goBackFun()" class="back-icon"></u-icon>
          <view class="pures-header-text">笔记</view>
        </view>
        <!-- 店铺选择 -->
        <view class="pures-header-shop">
          <text :style="{color: '#ffffff', fontSize: '32rpx'}">{{shopName}}</text>
          <!--<image @click="notePopShow = true" :src="shopImgUrl + 'code_shop/note-list-head-icon.png'" style="width: 44rpx;height: 44rpx;"></image>-->
        </view>
      </view>
    </view>
    <view class="details-content" :style="{ height: windowHeight - Number(headerHeight) + 'px' }">
      <scroll-view
            :scroll-y="true"
            :refresher-enabled="true"
            @refresherrefresh="onrefresherrefresh"
            :refresher-triggered="isTriggered"
            refresher-default-style="none"
            lower-threshold="30"
            @scrolltolower="onScrolltolower"
            style="height: 100%">
        <view class="details_scroll">
          <!-- 加载中提示 -->
          <view class="lanjiazai_wrap" v-if="skeletonLoading">
            <view class="lanjiazai_item">
              <u-loading mode="circle" :color="'#FFA844'" size="80" ></u-loading>
              <view class="tag">加载中...</view>
            </view>
          </view>
          <!--笔记详情列表数据-->
          <note-detail-item :shopsDetailsLists="noteListData" @noteRequireFun="noteRequireFun" />
          <!--加载更多-->
          <view class="chudijiazai">
            <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                        margin-bottom="30"/>
            <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
          </view>
          <view v-if="noteListData.length == 0" class="noDatas" :style="{marginTop:tabsHeight + navbarHeight + 'px'}">
            <u-empty text="暂无订单" mode="favor" icon-size="106"></u-empty>
          </view>
        </view>
      </scroll-view>
    </view>


    <!--筛选弹窗-->
    <u-popup v-model="notePopShow" mode="bottom" border-radius="34" >
      <view class="note-pop-wrap">
        <view v-for="(item, index) in notePopData" :key="index" class="note-pop-item">
          <view class="note-pop-item-title">{{item.title}}</view>
          <view class="note-pop-item-content">
            <view v-for="(item2,  index2) in item.list" :key="index2" class="note-pop-item-content-item" :style="{'width': item2.type == 'date' ? '220px' : ''}">
              <button v-if="item2.type  == 'text'" @click="ClickBtnMenus(item,item2,index)" class="mini-btn"
                      :class="{'active':item2.selected === 1}" size="mini">
                {{ item2.title }}
              </button>
              <view v-if="item2.type  == 'date'" class="pures-list-tab-right" :class="{'active':item2.selected === 1}">
                <view @click="timeClick(item, item2, index)" class="date-click"></view>
                <u-input type="text" v-model="beginDate" :placeholder="item2.title" placeholder-style="color:#888888;" style="width: 100%" disabled />
                <u-icon name="calendar" color="#888888" size="35"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="note-pop-btn">
          <u-button shape="circle" type="info" class="note-pop-btn-item" @click="resetFun">重置</u-button>
          <u-button shape="circle" type="warning" class="note-pop-btn-item" @click="submitFun">确定</u-button>
        </view>
      </view>
    </u-popup>
    <!-- 笔记要求详情弹窗 -->
    <u-popup v-model="noteRequireShow" mode="center" border-radius="14" width="80%">
      <view class="ask-pop">
        <view class="ask-content">{{noteRequireData}}</view>
        <view class="ask-btn" @click="noteRequireShow = false">
          <text >我知道了</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import NoteDetailItem from "@/components/note-list-item/note-detail-item.vue";
const app = getApp();
export default {
  components: {NoteDetailItem},
  data() {
    return {
      shopImgUrl: app.globalData.shopImgUrl,
      imgurlBwc: app.globalData.imgurlBwc,
      statusBarHeight: '', //顶部安全区域高度
      windowHeight: '', // 获取屏幕高度
      headerHeight: '',// 获取头部高度
      navbarHeight: '', // 导航栏高度
      shopDetailData: [], //店铺列表数据
      shopName: '', // 店铺名称
      noteListData: [], //笔记列表数据
      dataListId: '', // 笔记列表记录id
      skeletonLoading: true, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
      isTriggered: false, // 下拉刷新
      pageSize: 1, //  当前页数
      askShow:  false,//笔记要求弹窗
      askData: '', //笔记要求内容
      // 平台数据
      platformData: [
        {
          platformType: 1,
          title: '小红书',
          image: '/note/platform-xhs.png',
          fileList: [],
        },
        {
          platformType: 2,
          title: '抖音',
          image: '/note/platform-dy.png',
          fileList: [],
        },
        {
          platformType: 3,
          title: '大众点评',
          image: '/note/platform-dzdp.png',
          fileList: [],
        },
        {
          platformType: 4,
          title: '美团',
          image: '/note/platform-mt.png',
          fileList: [],
        },
      ],
      // 筛选数据
      notePopData: [
        {
          id: 1,
          title: '笔记要求平台',
          selected: 0,
          list: [
            {
              id: '1-1',
              pid: 1,
              title: '小红书',
              type: 'text',
              selected: 0,
            },
            {
              id: '1-2',
              pid: 1,
              title: '大众点评',
              type: 'text',
              selected: 0,
            }
          ]
        }
      ],
      notePopShow: false, //筛选弹窗是否显示
      noteRequireShow: false,//笔记要求详情弹窗
      noteRequireData: '', //笔记要求详情内容
    }
  },
  onLoad(opt) {
    console.log('opt', opt)
    this.shopName  = opt.shop_name
    this.dataListId  = opt.id
    // 安全区域高度
    this.statusBarHeight = uni.getWindowInfo().statusBarHeight
    // 获取屏幕高度
    this.windowHeight = uni.getWindowInfo().windowHeight
    // 导航栏高度
    uni.createSelectorQuery().select('.pures-header-top').boundingClientRect(rect => {
      //console.log('height：', rect); // 输出元素的高度
      this.navbarHeight = Number('height' in rect ? rect.height : '')
    }).exec();
    // 获取头部高度
    uni.createSelectorQuery().select('.pures-header').boundingClientRect(rect => {
      //console.log('height：', rect); // 输出元素的高度
      this.headerHeight = Number('height' in rect ? rect.height : '')
    }).exec();
    // 店铺数据
    this.GetshopList()
  },

  methods: {
    // 下拉刷新
    onrefresherrefresh(){
      let that = this
      that.skeletonLoading = true
      that.pageSize = 1
      // 开启 下拉刷新
      that.isTriggered = true
      // 下拉刷新清空数据
      // that.noteListData = []
      setTimeout(function () {
        that.GetNoteListData()
        uni.stopPullDownRefresh();
        // 关闭 下拉刷新
        that.isTriggered = false
      }, 1500);
    },
    //触底加载
    onScrolltolower() {
      // console.log('已滚动到底部');
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          that.pageSize++;
          that.GetNoteListData()
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },
    //获取图片的第一张
    packageimage(data) {
      return data[0]
    },
    //取出两位小数
    toFixedTwo(val) {
      var str = Number(val).toFixed(2)
      return str;
    },

    // 筛选弹窗事件
    ClickBtnMenus(clickItem1,clickItem,clickIndex) {
      let that = this
      console.log("点击了分类==", clickItem1.title, clickItem, clickIndex)
      // 实现选中不同的分类
      const oldData = that.notePopData
      oldData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(clickIndex === index){
            item2.selected = 0
          }
        })
      })
      oldData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(item2.type == 'date' && clickItem.pid === item2.pid){
            that.beginDate  = ''
          }
          if(clickItem.title === item2.title){
            item2.selected = 1
          }
        })
      })
      this.$nextTick(() => {
        that.FenLeiList = oldData
      })

    },
    // 确认筛选事件
    submitFun(){
      let that = this
      // 获取今天的日期
      let today = this.$dateFns.format(new Date(), 'yyyy-MM-dd');
      // 获取七天后的日期
      let sevenDaysLater = this.$dateFns.format(this.$dateFns.addDays(new Date(), 7), 'yyyy-MM-dd');
      // 获取一个月后的日期
      let oneMonthLater = this.$dateFns.format(this.$dateFns.addMonths(new Date(), 1), 'yyyy-MM-dd');

      // 提交数据前清空要提交的数据
      that.notePopData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          if(item2.selected === 1){
            if (item2.type == 'date'){
            } else {
              // 筛选赋值当天时间
              that.startDate = today
              if (item2.id === '1-1'){ //  近七天
                that.endDate = sevenDaysLater
              } else if (item2.id === '1-2'){ // 近一个月
                that.endDate = oneMonthLater
              }
              console.log('日期==', today)
            }
          }
        })
      })
      // 关闭弹窗
      that.notePopShow = false
      // 调用获取订单列表，重新加载数据
      that.GetOrderList()

    },
    // 重置筛选
    cancelFun(){
      let that = this
      that.notePopData.forEach((item, index) => {
        item.list.forEach((item2, index2) => {
          item2.selected = 0
        })
      })
      // 重置时间
      that.startDate = ''
      that.endDate = ''
      // 调用获取订单列表，重新加载数据
      that.GetOrderList()
    },
    //店铺数据
    GetshopList(){
      let that = this
      that.$api.GetshopList().then(res => {
        // 默认加载获取第一家店铺
        that.shopId = res.data.result[0].id
        let newList = []
        if (res.data.result.length > 0){
          // console.log('店铺列表', res.data.result)
          res.data.result.forEach(function (item, index) {
            newList.push({
              id: item.id,
              name: item.name,
            })
          });
          that.shopDetailData = newList
          console.log('店铺列表', that.shopDetailData)
          that.GetNoteListData()
        } else {
          uni.showToast({
            title: '暂无店铺',
            icon: 'none',
          })
        }
      }).catch(err => {

      });
    },
    // 笔记列表数据
    GetNoteListData(){
      let that = this
      that.$api.GetCompletedNotesDetailsAPI({
        id: that.dataListId,
        page: that.pageSize,
        limit: 10,
      }).then(res => {
        if (res.data.code === 200){
          // 重新组装笔记平台内容
          res.data.result.forEach(function (item, index) {
            // 外部方法处理好数据，并返回到数据中
            item.order_notes = that.platformDataFun(item.order_notes)
          });
          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          if (that.pageSize !== 1) {
            if (res.data.result.length !== 0) {
              that.loadingstatus = 'loading';
              that.noteListData = that.noteListData.concat(res.data.result)
              console.log('订单列表=', that.noteListData);
            } else {
              that.loadingstatus = 'nomore'
            }

          } else {
            that.noteListData = res.data.result
            that.loadingstatus = 'nomore';
          }
          that.skeletonLoading = false
          console.log('平台数据', that.noteListData)
        }

      })
    },
    // 循环平台数据，重新组装笔记内容
    platformDataFun(data){
      let that = this
      let newList = []
      let imgArr = []
      data.forEach(function (item, index) {
        that.platformData.forEach(function (platItem, platIndex) {
          if (platItem.platformType == item.platform_type) {
            item.images = JSON.parse(item.images);
            newList.push({
              "id":  item.id,
              "order_id": item.order_id,
              "user_id": item.user_id,
              "shop_id": item.shop_id,
              "shop_package_id": item.shop_package_id,
              "platform_type": item.platform_type,
              "url": item.url,
              "images": item.images,
              "create_time": item.create_time,
              "update_time": item.update_time,
              "title": platItem.title,
              "image": platItem.image,
            })
          }
        })
      });
      // console.log('平台数据', newList)
      return  newList
    },
    // 店铺组件返回数据
    /* changeShop(res){
      let that = this
      that.pageSize = 1
      that.shopId = res
      that.GetOrderList()
      console.log("商铺ID===", res)
    }, */
    askFun(data){
      console.log("笔记要求", data)
      this.askShow = true
      this.askData = data
    },
    // 笔记要求详情弹窗
    noteRequireFun(data){
      this.noteRequireShow = true
      this.noteRequireData = data
    },
    goBackFun(){
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #F5F5F5;
}
.details {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position:relative;
  // 顶部导航栏css
  .pures-header{
    .pures-header-top{
      background: url("https://td.lszbg.com/public/uploads/code_shop/note-list-head-bg.png") no-repeat;
      background-size: 100% 100%;
      .pures-header-box{
        height: 80rpx;
        line-height: 80rpx;
        position: relative;

        .back-icon{
          position: absolute;
          padding: 20rpx;
          z-index: 10;
        }
        .pures-header-text{
          color: #FFFFFF;
          text-align: center;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          z-index: 1;
        }
      }
      .pures-header-shop{
        height: 100rpx;
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
      }
    }
    .pures-header-content{

      .pures-head-tab{
        .u-badge{
          top: 24rpx !important;
          font-size: 38rpx !important;
          color: #FF8421 !important;
          background: none !important;
        }
      }
      .pures-header-content-notice{
        display: flex;
        padding: 24rpx;
        color: #FF7900;
        background: #FFF9F3;
        .pures-header-content-notice-text{
          font-size: 24rpx;
          padding-left: 20rpx;
        }
      }

    }
  }
  // 滚动内容
  .details-content{
    flex: 1;
    overflow-y: auto;
    .details_scroll{
      padding: 20rpx;
    }
  }
  // 组件样式
  .shop-list-item{
    padding: 20rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    .shop-list-item-head{
      display: flex;
      margin-bottom: 20rpx;
      .shop-list-item-img{
        width: 180rpx;
        height: 180rpx;
        border-radius: 16rpx;
        overflow: hidden;
        border: 2rpx solid #F6F6F6;
        .shop-item-img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .shop-list-item-right {
      margin-left: 30rpx;
      flex: 1;
      .shop-list-item-title {
        font-size: 28rpx;
        color: #333333;
        line-height: 60rpx;
      }
      .shop-list-item-subt {
        font-size: 24rpx;
        color: #888888;
        line-height: 40rpx;
      }
      .shop-list-item-plat{
        display: flex;
      }
      .shop-list-item-price {
        color: #FF7900;
        line-height: 50rpx;
      }
    }
    .shop-list-item-warp{
      margin-bottom: 20rpx;
      background: #F7F7F7;
      border-radius: 10rpx;
      padding: 20rpx;
      .shop-list-item-warp-arow{
        line-height: 60rpx;
        font-size: 24rpx;
        .shop-list-item-warp-arow-text{
          color: #666666;
          margin-right: 10rpx;
        }
        .shop-list-item-warp-arow-textr{
          color: #3D3D3D;
        }
        .price{
          color: #FF7900;
        }
      }
      .arowRight{
        display: flex;
        justify-content: space-between;
        .shop-list-item-warp-arow-text{
          float: left;
        }
        .arowRight-textr{
          display: flex;
          float: right;
          width: 90rpx;
          color: #888888;
        }
      }
    }
    .shop-list-item-link{
      .shop-list-item-link-item{
        width: 100%;
        margin-bottom: 20rpx;
        .shop-list-item-link-title{
          display: flex;
          align-items: center;
          line-height: 60rpx;
        }
        .shop-list-item-link-warp{
          line-height: 60rpx;
          margin-bottom: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .shop-list-item-link-warp-left{
            width: calc(100% - 60rpx);
          }
        }
        .shop-list-item-link-imgBox{
          width: 100%;
          height: 320rpx;
          .shop-list-item-link-imgBox-item{
            width: 260rpx;
            height: 320rpx;
            border-radius: 20rpx;
            margin-right: 20rpx;
            display: inline-block;
            // background: #333333;
            .shop-list-item-link-img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .shop-list-item-link-img{
          width: 40rpx;
          height: 40rpx;
          display: block;
          float: left;
          margin-right: 10rpx;
        }
      }
    }
  }
  // 筛选笔记css
  .note-pop-wrap{
    padding: 30rpx;
    .note-pop-item {
      .note-pop-item-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #3D3D3D;
        line-height: 60rpx;
      }
      .note-pop-item-content {
        // display: flex;
        flex-wrap: wrap;
        .note-pop-item-content-item {
          display: inline-block;
          margin-right: 20rpx;
          position: relative;
          margin-bottom: 20rpx;
          .btn-img1 {
            width: 84rpx;
            height: 38rpx;
            position: absolute;
            top: -16rpx;
            right: 0;
          }
          .btn-img2 {
            width: 96rpx;
            height: 38rpx;
            position: absolute;
            top: -16rpx;
            right: 0;
          }
          .pures-list-tab-right{
            width: 100%;
            background: #F6F6F6;
            padding: 0 10rpx;
            border-radius: 10rpx;
            display: flex;
            justify-content: space-between;
            position: relative;
            .date-click  {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              z-index: 10;
            }
          }
        }

        .mini-btn {
          background-color: #F6F6F6;
          border: none; /* 去掉按钮本身的边框 */
          box-shadow: none;
          padding: 8rpx 20rpx;
        }

        .active {
          color: #FF7900;
          border: 1px solid #FFBB7D;
          background: #FFF7EF;
        }

        /* 去掉伪元素上的边框 */
        .mini-btn::after {
          border: none;
        }
      }
    }
    .note-pop-btn{
      display: flex;
      .note-pop-btn-item {
        margin: 0 10rpx;
        width: 50%;
      }
    }

    .active {
      color: #FF7900;
      border: 1px solid #FFBB7D;
      background: #FFF7EF;
    }
  }
  // 笔记要求详情弹窗
  .ask-pop{
    padding: 30rpx;
    .ask-content{
      line-height: 50rpx;
    }
    .ask-btn{
      padding: 10rpx 20rpx;
      margin: 20rpx 0;
      font-size: 32rpx;
      color: #FFFFFF;
      background: #FF7900;
      border-radius: 50rpx;
      text-align: center;
    }
  }
}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding: 50rpx 0;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
    }
    .loading_gif {
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>